<template>
  <div class="bg-fff h-100p bdr-10 pd-10">
    <el-menu :default-active="billType" mode="horizontal" class="bdr-top-10">
      <el-menu-item @click="getBills('')" index="">全部</el-menu-item>
      <el-menu-item @click="getBills('0')" index="0">电票
        <v-plain-tips :num="billTips.electricTicketCount"/>
      </el-menu-item>
      <el-menu-item @click="getBills('1')" index="1">纸票
        <v-plain-tips :num="billTips.paperTicketCount"/>
      </el-menu-item>
    </el-menu>
    <div class="bg-fff pd-10 fx-1 bdr-bottom-10">
      <div class="top">
        <el-radio-group v-model="billStatus" @change="getBills(billType)">
          <el-radio-button :label="item.value" v-for="item in $dict.billAuthTypes" :key="item.value">
            {{item.label}}&nbsp;
            <v-plain-tips :num="billTips.pendingReviewCount" v-if="item.value===0" class="tips"/>
            <v-plain-tips :num="billTips.pendingInquiryCount" v-if="item.value===1" class="tips"/>
          </el-radio-button>
        </el-radio-group>
        <em class="fx-1"></em>
        <el-checkbox v-model="isCard" label="卡片模式" border></el-checkbox>
      </div>
      <div class="panel">
        <v-bill-card-inventory-list v-if="isCard" :bills="bills" @change="change"></v-bill-card-inventory-list>
        <v-plain-table v-else :data="bills" @change="change">
          <template slot="expand" slot-scope="{scope}">
            <el-button type="text" v-if="scope.row.billStatus === 0" @click="$router.push(`./audit/${scope.row.id}`)">
              审核
            </el-button>
            <el-button type="text" @click="$router.push(`./detail/${scope.row.id}`)">详情</el-button>
            <!--<el-button type="text" v-if="scope.row.billStatus === 2" @click="showBillDetail(scope.row)">删除</el-button>-->
          </template>
        </v-plain-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator'
  import vBillCardInventoryList from '@/components/bill-card-inventory-list'
  import vPlainTable from '@/components/plain-table'
  import vPlainDialog from '@/components/plain-dialog'
  import vBillDetail from '@/components/bill-detail'
  import vFormTitle from '@/components/form-title'
  import { Action, Getter } from 'vuex-class'
  import vPlainTips from '@/components/plain-tips'

  @Component({
    components: {
      vBillCardInventoryList,
      vPlainTable,
      vPlainDialog,
      vBillDetail,
      vFormTitle,
      vPlainTips
    }
  })
  export default class Inventory extends Vue {
    billStatus = ''
    billType = ''
    isCard = false
    bills: TableData = {
      header: [
        {
          key: 'billNumber',
          label: '票据编号'
        },
        {
          key: 'createTime',
          label: '录入日期'
        },
        {
          key: 'faceValue',
          label: '票面金额'
        },
        {
          key: 'billStatusName',
          label: '票据状态'
        },
        {
          key: 'expectedPrice',
          label: '期望价格'
        }
      ],
      body: [],
      footer: {
        total: 999,
        currentPage: 1
      }
    }
    currentBillDetail = {}

    async getBills (billType = '') {
      this.billType = billType
      let res: AjaxResponse = await this.$axios.post('b/boms/bill/bills', {
        pageSize: 10,
        currentPage: this.bills.footer.currentPage,
        billStatus: this.billStatus,
        billType: this.billType
      })
      if (res.responseCode === 200) {
        this.bills.body = res.data.items
        this.bills.footer.total = res.data.totalNum
      }
    }

    async showAuth ({ id }) {
      this.$router.push(`./audit/${id}`)
    }

    async showBillDetail ({ id }) {
      this.$router.push(`./detail/${id}`)

    }

    change (page) {
      this.bills.footer.currentPage = page
      this.getBills()
    }

    @Action getBillsTips
    @Getter billTips
    @Action getMenusTips

    get tips () {
      return this.billTips
    }

    mounted () {
      if(this.$route.query.type){
        this.billStatus = this.$route.query.type
      }
      
      this.getBills()
      this.getBillsTips()
      this.getMenusTips()
    }
    init () {
    }
  }
</script>

<style lang="less" scoped>
  .mh-100p {
    display: flex;
    flex-direction: column;
  }

  .bg-fff {
    margin-top: 10px;
  }

  .top {
    display: flex;
    padding-bottom: 20px;
  }

  .tips {
    position: absolute;
    right: 2px;
    top: 10px;
  }
</style>
